<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片切换</title>
  <style>
    /* 全局样式 */
    * {
      margin: 0;
      padding: 0;
      font-weight: normal;
      font-style: normal;
      box-sizing: border-box;
      list-style: none;
      text-decoration: none;
    }

    img {
      display: block;
    }

    a {
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    #app {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }

    button, img {
      display: block;
      width: 100px;
      height: 100px;
      object-fit: contain;
      border-radius: 12px;
      border: none;
      outline: none;
      margin: 10px;
    }

    button {
      flex-basis: calc(50% - 120px);
      height: 50px;
      margin: 10px 50px;
    }

    img {
      width: 300px;
      height: 300px;
    }

    button {
      border: 1px solid #ccc;
    }

    button:hover {
      background: #eee;
    }

    button:active {
      box-shadow: inset 3px 3px 3px rgba(0,0,0,0.5);
    }
    p {
      width: 100%;
      margin: 20px;
      padding-left: 300px;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="index = index === 0 ? 0 : index - 1">上一页</button>
    <button @click="index = index === imgs.length - 1 ? imgs.length - 1 : index + 1">下一页</button>
    <img :src="baseUrl + imgs[index]" alt="">

    <p v-for="(value, key) in fruits">
      <span>{{ mapping[key] }}: {{ value }}</span>
    </p>

    <h3>小黑的书架</h3>
    <p v-for="(item, index) in books">《{{ item.name }}》{{ item.author }} <button @click="del(item.id)" :key="item.id">删除</button></p>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgs: [
          '/img/10-01.png',
          '/img/10-02.png',
          '/img/11-00.gif',
          '/img/11-01.gif',
          '/img/11-02.gif',
          '/img/11-03.gif',
          '/img/11-04.png',
          '/img/11-05.png'
        ],
        fruits: {
          name: '苹果',
          id: 98,
          price: 7.81,
          weight: '100g'
        },
        mapping: {
          name: '名称',
          id: 'ID',
          price: '价格',
          weight: '重量'
        },
        baseUrl: 'http://10.55.10.44:25040',
        index: 0,
        books: [
          {
            id: 1,
            name: '红楼梦',
            author: '曹雪芹',
            isshow: true
          },
          {
            id: 2,
            name: '西游记',
            author: '吴承恩',
            isshow: true
          },
          {
            id: 3,
            name: '水浒传',
            author: '施耐庵',
            isshow: true
          },
          {
            id: 4,
            name: '三国演义',
            author: '罗贯中',
            isshow: true
          }
        ]
      },
      methods: {
        del (id) {
          this.books = this.books.filter(v => v.id !== id)
        }
      }
    })
  </script>
</body>
</html>
